<!--
  名称：基础地图组件
  用途：基于openlayers封装的通用地图组件
  作者：王禹
 -->
<template>
  <div class="outer-map-container" >
    <!--地图主容器 -->
    <div v-if="mapContainerFlag" class="master-map-container" :id="mapContainerId"></div>
  </div>
</template>

<script>
import olproj from 'ol/proj'
import Map from 'ol/map'
import View from 'ol/view'
import GeoJSON from 'ol/format//GeoJSON'
import 'ol/ol.css'
import { mapGetters } from 'vuex'
export default {
  data (vm) {
    return {
      mapContainerFlag: true,
      mapContainerId: vm.$createGUID(),
      // 地图对象
      mapObj: {},
      // 中心点
      centerPoint: {},
      // 描点的状态
      tracingPointState: {},
      // 描点图层
      tracingPointLayers: {},
      // geoJSON解析器
      geoJSON: {},
      select: {},
      popup_coordinate: {}
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
    ])
  },
  // 在实例创建以后，初始化全部组件状态数据
  created: function () {
    this.geoJSON = new GeoJSON()
    // 初始化面板状态
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      // 地图参数
      let option = {
        controls: this.controls,
        logo: false, // 不显示logo
        layers: [...this.baseMapLayers], // 基础底图图层
        target: this.mapContainerId, // 设定容器
        overlays: [], // 覆盖层
        view: new View({ // 初始视角
          center: olproj.transform(
            [114.30878471, 30.591228],
            'EPSG:4326',
            // 正式
            'EPSG:3857'
          ),
          zoom: 12, // 图层
          maxZoom: this.maxZoom || 18, // 默认设为18，如果调用方传入则使用调用方的
          minZoom: this.minZoom || 1 // 默认设为18，如果调用方传入则使用调用方的
        })
      }
      // 创建地图
      this.mapObj = new Map(option)
      if (!window.maps) { window.maps = [] }
      window.maps.push(this.mapObj)
      this.$emit('ready')
    }
  },
  watch: {
  },
  components: {},
  // 组建接受的传入参数
  props: {
    controls: Array,
    'base-map-layers': Array,
    'max-zoom': Number
  },
  activated () {
    this.mapObj.updateSize()
    this.mapObj.setTarget(this.mapContainerId)
  }
}
</script>
<style scoped>
/* 地图外层容器 */
.outer-map-container {
  width: 100%;
  height: 100%;
}
/* 地图主容器 */
.master-map-container {
  /* min-width: 100vh;
  min-height: calc(100vh - 65px); */
  width: 100%;
  height: 100%;
}
</style>
